<template>
  <div class="import-dialog">
    <el-dialog
      :title="title"
      v-model="dialog"
      :close-on-click-modal="false"
      width="590px"
      @close="close"
    >
      <div class="dialog-body">
        <div class="box">
          <span class="label">学生信息：</span>
          <el-button
            class="upload-file"
            type="primary"
            icon="Upload"
          >
            点击上传
            <input
              class="file-btn"
              ref="referenceUpload"
              type="file"
              accept=".xls"
              @change="uploadFile"
            >
          </el-button>
          <span
            class="download"
            @click="downLoad"
          >{{ fileName }} <i class="el-icon-download"></i></span>
        </div>
        <div class="tips">
          提示：请先下载模板，再上传，仅支持xls格式。
        </div>
        <div
          class="file"
          v-show="fileText"
        >
          <span
            class="item"
            :alt="fileText"
            :title="fileText"
          >
            {{ fileText.length > 20 ? fileText.slice(0, 20) + '...'  : fileText }}
            <i
              class="el-icon-delete"
              @click="remove"
            ></i>
          </span>
        </div>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          round
          :loading="loading"
          class="btn-hover"
          size="small"
          @click="sub"
        >
          确定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="提示"
      v-model="showType"
      width="590px"
    >
      <div class="success-dialog-body">
        <div class="success-tips">
          <i class="iconfont icon-chenggong"></i>
        </div>
        <p class="info">提交成功，您上传的学生成绩人数为{{ studentNum }}</p>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          round
          class="btn-hover"
          size="small"
          @click="hide"
        >
          确定
        </el-button>
      </div>
    </el-dialog>

    <uploadFile ref="uploadFile" />
  </div>
</template>

<script>
import {
  uploadStudentExcel,
  downLoadStudentExcel,
  downLoadAllData,
  downLoadData,
  importAllScore,
  importScore,
} from "@/api/courseReach";
import uploadFile from "./uploadFail.vue";
import { downLoadFile } from "@/utils/common";
export default {
  components: {
    uploadFile,
  },
  data() {
    return {
      cid: null,
      loading: false,
      title: "",
      dialog: false,
      file: "",
      fileName: "",
      fileText: "",
      type: null,
      checkId: null,
      showType: false,
      studentNum: "",
      checkName: "",
    };
  },
  methods: {
    init(type, info, obj) {
      this.type = type;
      this.cid = info;

      if (type == 1) {
        this.title = "Excel导入";
        this.fileName = "学生信息模板.xls";
      } else if (type == 2) {
        this.title = "批量导入成绩";
        this.fileName = "批量学生成绩模板/数据.xls";
      } else {
        const { checkId, checkName } = obj;
        this.checkId = checkId;
        this.title = "导入成绩";
        this.fileName = "学生成绩模板/数据.xls";
        this.checkName = obj.checkName;
      }

      this.dialog = true;
    },
    downLoad() {
      const mimeType = "application/vnd.ms-excel";
      const data = {};
      let fn = null;
      if (this.type == 1) {
        data.tempCode = "CONCLUDE_STU_TEMP";
        fn = downLoadStudentExcel(data);
      }

      if (this.type == 2) {
        data.concludeId = this.cid;
        fn = downLoadAllData(data);
      }

      if (this.type == 3) {
        data.concludeId = this.cid;
        data.checkId = this.checkId;
        fn = downLoadData(data);
      }

      fn.then(async (res) => {
        if (res.type == mimeType || this.type == 1) {
          const name =
            this.type == 3
              ? `${this.checkName}-${this.fileName}`
              : this.fileName;
          downLoadFile(new Blob([res]), name, mimeType);
        } else {
          const { message } = JSON.parse(await new Response(res).text());
          this.$message.error(message);
        }
      });
    },
    uploadFile(e) {
      const file = e.target.files[0];

      if (/\.xls$/.test(file.name)) {
        this.fileText = file.name;
        this.file = file;
      } else {
        this.$message.error("请先下载模板，再上传，仅支持xls格式");
      }
    },

    uploadFnAjax(file) {
      const data = new FormData();
      data.append("file", file);
      data.append("concludeId", this.cid);
      if (this.type == 1) {
        uploadStudentExcel(data)
          .then((res) => {
            this.$message.success("上传成功");
            this.$emit("refresh");
            this.remove();
            this.loading = false;
            this.dialog = false;
          })
          .catch(() => {
            this.loading = false;
          });
      }

      if (this.type == 2) {
        importAllScore(data)
          .then((res) => {
            this.reset(res.data);
          })
          .catch((err) => {
            const { code, data } = err;

            this.loading = false;

            if (code == 700012) {
              this.remove();
              this.$refs.uploadFile.init(data);
            }
          });
      }

      if (this.type == 3) {
        data.append("checkId", this.checkId);
        importScore(data)
          .then((res) => {
            this.reset(res.data);
          })
          .catch((err) => {
            const { code, data } = err;

            this.loading = false;

            if (code == 700012) {
              this.remove();
              this.$refs.uploadFile.init(data);
            }
          });
      }
    },

    remove() {
      this.file = null;
      this.$refs.referenceUpload.value = null;
      this.fileText = "";
    },

    sub() {
      if (this.file) {
        this.loading = true;
        this.uploadFnAjax(this.file);
      } else {
        this.$message.error("请上传文件");
      }
    },

    hide() {
      this.showType = false;
    },

    reset(data) {
      this.studentNum = data;
      this.dialog = false;
      this.showType = true;
      this.remove();
      this.loading = false;
      this.$emit("refresh");
    },

    close() {
      this.file = null;
      this.$refs.referenceUpload.value = null;
      this.fileText = "";
      this.loading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.import-dialog {
  .download {
    color: #1277eb;
    margin-left: 16px;
    font-weight: 400;
    cursor: pointer;
    vertical-align: middle;
  }

  .dialog-body {
    padding: 30px 0 14px 49px;
  }

  .label {
    color: #474747;
    font-size: 14px;
    font-weight: 400;
  }

  .tips {
    margin-top: 14px;
    font-size: 14px;
    color: #adadad;
    font-weight: 400;
    padding-left: 75px;
  }

  .file {
    margin-top: 20px;
    padding-left: 75px;
    color: #474747;
    font-weight: 400;
    .el-icon-delete {
      color: #385899;
      font-weight: bold;
      cursor: pointer;
    }
  }

  .upload-file {
    position: relative;
    .file-btn {
      opacity: 0;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
  }

  .dialog-footer {
    text-align: center;
    padding-bottom: 21px;
    .el-button--small,
    .el-button--small.is-round {
      padding: 9px 30px;
    }

    .el-button {
      font-size: 14px;
      border-color: #1277eb;
      color: #1277eb;
    }
  }

  .btn-hover:hover {
    background: #1277eb;
    color: #fff !important;
  }

  .success-dialog-body {
    padding: 18px 0 0 0;
  }

  .success-tips {
    text-align: center;
    color: #68c23b;
    .icon-chenggong {
      font-size: 52px;
    }
  }

  .info {
    margin-top: 30px;
    text-align: center;
    color: #727272;
    font-weight: 400;
    font-size: 16px;
  }
}
</style>
